<html>
	<head>
		<title>塔防模式-红方</title> <!--设置网页标题-->
		<meta charset="UTF-8"/> <!--设置编码格式-->
		<!--声明css代码域-->
		<style>
			body {
				background-color:antiquewhite;
				height: 100%;
			}
			/*设置div样式*/
			.div1 {
				border:  solid 1px;
				border-radius: 20px;/*设置边框角度*/
				width: 600px;
				height: 410px;
				text-align: center;/*设置区域内元素的位置居中*/
				margin: auto;/*设置区域在页面的左右位置居中*/
				margin-top: 50px;/*设置区域距离页面最上端的距离*/
				background-color: rgb(235, 174, 172);/*设置背景颜色*/
			}
            .div2 {
				border:  solid 1px;
				border-radius: 50px;/*设置边框角度*/
				width: 600px;
				height: 410px;
				text-align: center;/*设置区域内元素的位置居中*/
				margin: auto;/*设置区域在页面的左右位置居中*/
				margin-top: 50px;/*设置区域距离页面最上端的距离*/
				background-color: rgb(235, 174, 172);/*设置背景颜色*/
            }
            .div3 {
				font-size: 25px;
				font-weight: bold;
				transform: translate(20px, -800px);
				line-height: 50px;
				width: 500px;
            }
			.div4 {
				font-size: 40px;
				color: brown;
			}
			/*设置按钮样式*/
			input[type=button]{
				border-radius: 10px;/*设置边框角度*/
				width: 150px;
				height: 100px;
				margin-top: 20px;/*设置与上一行底部的距离*/
				margin-left: 5px;/*设置与左元素之间的距离*/
				margin-right: 5px;/*设置与右元素之间的距离*/
				font-size: 30px;/*设置字体大小*/
				font-weight: bold;/*设置字体加粗*/
			}  
            .l {
                transform: translate(0%, 140%);
            }
            .r {
                transform: translate(110%, 140%);
            }
            .u {
                transform: translate(-110%, 0%);
            }
            .d {
                transform: translate(0%, 150%);
            }
		</style>
		
		<!--声明js代码域-->
		<script type="text/javascript">
            // 发送数据给服务器
			function PostToServer(data) {
				var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
				httpRequest.onload = function () {      //处理从服务器回应的数据
                }
				httpRequest.open("POST", "/red", true); //第三个参数规定请求是否异步处理,true表示脚本会在send()方法之后继续执行，而不等待来自服务器的响应。
				httpRequest.setRequestHeader("Content-Type", "application/json");  //设置请求头信息
				httpRequest.send(JSON.stringify(data)); //设置为发送给服务器数据
			}
			// 按钮按下事件
			function mousedown(btn){
				// 获取button按钮对象的value值
				var data = btn.value;
                PostToServer(data);
			}
            // 按钮松开事件
			function mouseup(btn){
				// 获取button按钮对象的value值
				var data = btn.value;
                PostToServer("off");
			}
            // 第二控制板
            function click_(btn){
                var data = btn.value;
                PostToServer(data);
            }
		</script>
	</head>
	<body>
		<div class="div1">
			<input type="button" class="l" id="l" value="left"  onmousedown="mousedown(this)" onmouseup="mouseup(this)"/>
            <input type="button" class="r" id="r" value="right" onmousedown="mousedown(this)" onmouseup="mouseup(this)"/>
			<input type="button" class="u" id="u" value="up"    onmousedown="mousedown(this)" onmouseup="mouseup(this)"/>
            <input type="button" class="d" id="d" value="down"  onmousedown="mousedown(this)" onmouseup="mouseup(this)"/>
        </div>
		<div class="div2">
			<input type="button" class="l" id="k1"    value="k1"    onclick="click_(this)"/>
			<input type="button" class="r" id="k2"    value="k2"    onclick="click_(this)"/>
            <input type="button" class="u" id="skill" value="skill" onclick="click_(this)"/>
            <input type="button" class="d" id="hero"  value="hero"  onclick="click_(this)"/>
		</div>
		<div class="div3">
			<div class="div4">塔防模式红色方控制界面</div><br>
			K1 K2 : 选择英雄移动光标，控制游戏进程 <br>
			hero  : 确定选择英雄 <br>
			skill : 英雄释放技能 <br>
			up、down、left、right : 控制英雄移动<br>
			注 : 您和对方都可以通过K1 K2选择游戏进程<br>
			当您和对方都确定选择后才会进入游戏
		</div>
	</body>
</html>